<template>
    <div class="app-top-bar-i18n-entry">
        <ElDropdown trigger="click" @command="onDropdownItemCommandTriggered">
            <div class="i18n-current-item">
                <el-icon class="i18n-icon">
                    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-7b5f8a18="">
                        <path
                            fill="currentColor"
                            d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199
                            3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222
                            0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336
                            1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676
                            16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0
                            5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032
                            16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2
                            6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
                        />
                    </svg>
                </el-icon>

                <span class="language-name">{{ DICT_MAPS_LOCALE_VALUES_INTO_UI_TEXTS[$i18n.locale] }}</span>

                <el-icon class="el-icon--right">
                    <ElIconArrowDown />
                </el-icon>
            </div>

            <template #dropdown>
                <ElDropdownMenu>
                    <ElDropdownItem
                        v-for="(locale, arrayIndex) in $i18n.availableLocales"
                        :key="`locale-${arrayIndex}:${locale}`"
                        :value="locale"
                        :command="locale"
                    >{{ DICT_MAPS_LOCALE_VALUES_INTO_UI_TEXTS[locale] }}</ElDropdownItem>
                </ElDropdownMenu>
            </template>
        </ElDropdown>
    </div>
</template>

<script lang="ts" setup>
import { ArrowDown as ElIconArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
import {
    DICT_MAPS_LOCALE_VALUES_INTO_UI_TEXTS,
} from '@/vue-i18n/constants'

const i18n = useI18n()

function onDropdownItemCommandTriggered (locale: string): void {
    i18n.locale.value = locale
    localStorage.setItem('xmeDataGatherI18n', locale)
    // setAppI18nLocale(locale)
}
</script>

<style lang="scss">
@use 'sass:map';



$_ComponentRootSelector: '.app-top-bar-i18n-entry';



// 非着色类规则。
#{$_ComponentRootSelector} {
    $_Width: 7rem;
    $_PartsHeight: 1.2rem;

    display: block;
    flex: 0 0 $_Width;
    width: $_Width;
    height: var(--smr-app-layout-top-bar-height);
    margin: 0;

    .el-dropdown {
        cursor: pointer;
        color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        padding: 0.25rem 1rem;
        font-size: 0.6rem;
    }

    .i18n-current-item {
        width: 100%;
        border-width: 0.05rem;
        border-style: solid;
        border-color: currentColor;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 10rem;
        padding: 0 0.3rem 0 0.4rem;
    }

    .i18n-icon {
        $_IconSize: 0.7rem;

        flex: 0 0 $_IconSize;
        width: $_IconSize;
        height: $_PartsHeight;
        font-size: 1rem;
        margin: 0;
    }

    .el-icon--right {
        $_IconSize: 0.6rem;

        flex: 0 0 $_IconSize;
        width: $_IconSize;
        height: $_PartsHeight;
        font-size: 0.75rem;
        margin: 0;
    }

    .language-name {
        height: auto;
        line-height: $_PartsHeight;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0.1rem;
    }
}
</style>
